<template>
	<view class="nft_container">
		<z-paging ref="paging" v-model="nftList" @query="queryList" bg-color="var(--echo-nft-bg-color)"
			empty-view-img="../../static/img/nullData.png" empty-view-text="暂无数据">
			<view class="nft_card_bg">
				<image src="../../static/img/nft/nft_header_bg.png" mode=""></image>
			</view>
			<view class="nft_card">
				<!-- 顶层滚动 -->
				<view class="top_notice">
					<u-notice-bar :text="notice" bgColor="var(--echo-nft-bg-color)" color="#fff"></u-notice-bar>
				</view>
				<!-- 顶部导航 -->
				<view class="header_nav">
					<view class="icon_box" v-for="item in headerNavList" :key="item.id">
						<!-- 图标 -->
						<view class="icon" @tap="turnPage(item.to)">
							<image :src="item.iconSrc" mode=""></image>
						</view>
						<!-- 文字 -->
						<view class="icon_text">
							{{ item.iconText }}
						</view>
					</view>
				</view>
				<!-- 标题 -->
				<u-tabs :list="tablist" @change="changeTab" :inactiveStyle="{color: '#999'}"
					:activeStyle="{color: 'var(--echo-main-color)'}" lineColor="var(--echo-main-color)"></u-tabs>
				<!-- nft展示 -->
				<view class="nft_lists_card">
					<nft-card v-for="item in nftList" :key="item.serialNo" :item="item"
						@changeUrl="changeUrl(item.serialNo, item.theme.type)">
					</nft-card>
				</view>
			</view>
		</z-paging>
	</view>
</template>

<script>
	import {
		getNftPageList
	} from '@/config/nftApi.js';
	export default {
		data() {
			return {
				// nfttab切换数据列表
				nftList: [],
				isShow: true,
				ccy: '',
				notice: 's11e-DAO web3.0的施工队!',
				tablist: [{
					name: 'NFT主题',
				}, {
					name: 'NFT碎片',
				}],
				tabIndex: 0,
				// 头部列表
				headerNavList: [{
						iconSrc: '../../static/img/nft/portrait.png',
						iconText: 'NFT身份',
						to: 'toProfilePhoto',
						id: 1
					},
					{
						iconSrc: '../../static/img/nft/equity.png',
						iconText: 'NFT权益',
						to: 'toEquity',
						id: 2
					}, {
						iconSrc: '../../static/img/nft/box.png',
						iconText: 'NFT盲盒',
						to: 'toBlindBox',
						id: 3
					}
				],
				tenantId: ''
			}
		},
		created() {
			this.tenantId = getApp().globalData.tenantId
		},
		methods: {
			// type 0主题 1碎片
			// 因为主题用的多,table切换主题在前面
			queryList(pageNo, pageSize) {
				// 一开始是0
				if (!this.tabIndex) {
					console.log(this.tenantId)
					getNftPageList({
						pageNo,
						pageSize,
						type: 0,
						tenantId: this.tenantId
					}).then((res) => {
						console.log('主题res', res)
						if (res)
							this.$refs.paging.completeByTotal(res.data, res.pagination.totalSize);
					})
					return
				}
				getNftPageList({
					pageNo,
					pageSize,
					type: 1,
					tenantId: this.tenantId
				}).then((res) => {
					console.log('碎片res', res)
					if (res)
						this.$refs.paging.completeByTotal(res.data, res.pagination.totalSize);
				})
			},
			changeTab(item) {
				this.tabIndex = item.index
				// 切换刷新,重新请求
				this.$refs.paging.reload();
			},
			turnPage(to) {
				this[to]()
			},
			// nft权益
			toEquity() {
				uni.navigateTo({
					url: "/pages/nft/nftEquity"
				})
			},
			// nft头像
			toProfilePhoto() {
				uni.navigateTo({
					url: "/pages/nft/nftIdentity"
				})
			},
			// nft盲盒
			toBlindBox() {
				uni.navigateTo({
					url: "/pages/nft/nftBlindBox"
				})
			},
			// 路由跳转
			changeUrl(serialNo) {
				console.log('serialNo', serialNo)
				uni.navigateTo({
					url: "/pages/nft/nftDetail?exhibitionType=" + 'NFT' + '&serialNo=' + serialNo
				})
			}
		}
	}
</script>

<style lang="scss">
	.nft_container {
		background-color: $echo-nft-bg-color;
	}

	.nft_card_bg {
		height: 400rpx;

		image {
			width: 101%;
			height: 100%;
		}
	}

	.nft_card {
		position: relative;
		z-index: 2;
		top: -100rpx;
		border-top-left-radius: 80rpx;
		border-top-right-radius: 80rpx;
		margin-bottom: -100rpx;
		background-color: $echo-nft-bg-color;

		.top_notice {
			width: 80%;
			margin: 0 auto;
			margin-top: 30rpx;
		}

		.header_nav {
			padding: 20rpx 0 40rpx 0;
			margin: 0 70rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 2px dashed $echo-nft-iconText-color;


			.icon_box {
				height: 120rpx;
				text-align: center;
				font-size: 28rpx;

				.icon {
					width: auto;
					height: 90rpx;
					border-radius: 50%;

					image {
						width: 80rpx;
						height: 80rpx;
					}
				}

				.icon_text {
					color: $echo-nft-iconText-color;
				}
			}
		}

		.nft_lists_card {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			padding: 30rpx 30rpx;
		}
	}

	// z-paging
	[class*="zp-paging-container"] {
		background-color: $echo-nft-bg-color !important;
	}
</style>
